<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_905916_rnkpnvjj7w.css"
    />
    <link
      rel="stylesheet"
      href="../css/element.css"
    />
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/login_register/register.css" />
    <title>找回密码</title>
  </head>

  <body>
    <iframe
      src="find_header.html"
      frameborder="0"
      style="width:100%;height:100px;margin-bottom:-4px;border-bottom: 1px solid rgba(0,0,0,0.15);"
    ></iframe>
    <div id="app" v-cloak>
      <div class="wrap register_container">
        <!-- 步骤条 -->
        <el-steps :active="active" align-center class="step_bar" space="200px">
          <el-step
            title="验证手机"
            description=""
            icon="iconfont icon-num_1"
          ></el-step>
          <el-step
            title="更改密码"
            description=""
            icon="iconfont icon-num_"
          ></el-step>
          <el-step
            title="更改成功"
            description=""
            icon="iconfont icon-mum_"
          ></el-step>
        </el-steps>

        <!-- 第一步 -->
        <div class="first_step" v-show="first_steap">
          <!-- 手机号、验证码 -->
          <div class="input_wrap">
            <span class="input_tit fl"> 手机号： </span>
            <input
              type="text"
              name=""
              v-model="iphone"
              class="phone_input fl"
            />
          </div>
          <div class="input_wrap">
            <span class="input_tit fl"> 验证码： </span>
            <input type="text" name="" v-model="code" class="test_num fl " />
            <div class="fl get_num cursor" @click="getDxCode">
              {{ get_code }}
            </div>
          </div>

          <div class="register_btn cursor" @click="register_btn">下一步</div>
        </div>

        <!-- 第二部 -->
        <div class="first_step" v-show="second_steap">
          <div class="input_wrap">
            <span class="input_tit fl"> 密码： </span>
            <input type="text" name="" v-model="pwd1" class="phone_input fl" />
          </div>
          <div class="input_wrap">
            <span class="input_tit fl"> 确认密码： </span>
            <input type="text" name="" v-model="pwd2" class="phone_input fl" />
          </div>

          <div class="register_btn cursor" @click="register_finish">确定</div>
        </div>

        <!-- 第二部 -->
        <div class="first_step" v-show="third_step">
          <div class="finish_wrap">
            <div class="icons fl">
              <img src="../images/icon_ok.png" alt="" />
            </div>
            <p class="success_text fl">恭喜您，找回密码成功！</p>
          </div>
          <p class="finish_return">
            {{second}}秒后将跳转至登录页面，或<a href="login.html">点击跳转</a>
          </p>
        </div>
      </div>
     <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
    
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
      var app = new Vue({
        el: "#app",
        data: function() {
          return {
            bodycss: true,
            active: 1,
            first_steap: true,
            second_steap: false,
            third_step: false,
            timer: 60,
            get_code: "获取验证码",
            get_switch: true,
            iphone: "",
            pwd1: "",
            pwd2: "",
            code: "",
            second:2
          };
        },
        created() {},
        mounted() {},
        methods: {
          // 获取验证码
          getDxCode() {
            if (this.iphone == "") {
              app.$message.error("请输入手机号");
            } else if (!/^1(3|4|5|7|8)\d{9}$/.test(this.iphone)) {
              app.$message.error("请输入正确手机号");
            } else if (app.get_switch) {
              app.get_switch = false;
              axios({
                method: "POST",
                url: base_url + "/user/getDxCode",
                data: Qs.stringify({
                  iphone: this.iphone
                }),
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                  TOKEN: localStorage.getItem("wACCESS_TOKEN")
                }
              })
                .then(function(res) {
                  console.log(res.data.data);
                  var timer = setInterval(() => {
                    app.timer--;
                    app.get_code = app.timer + "秒后重新获取";
                    if (app.timer == 0) {
                      app.get_code = "获取验证码";
                      app.get_switch = true;
                      clearInterval(timer);
                    }
                  }, 1000);
                })
                .catch(function(error) {
                  console.log(error);
                });
            }
          },
          // 第一步到第二部
          register_btn() {
            axios({
              method: "POST",
              url: base_url + "/user/verifyVCode",
              data: Qs.stringify({
                phoneNum: this.iphone,
                code: this.code
              }),
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                TOKEN: localStorage.getItem("wACCESS_TOKEN")
              }
            })
              .then(function(res) {
                console.log(res);
                if (res.data.code == 1) {
                  app.first_steap = false;
                  app.second_steap = true;
                  app.active = 2;
                } else {
                  app.$message({
                    message: res.data.msg,
                    type: "warning"
                  });
                }
              })
              .catch(function(error) {
                console.log(error);
              });
          },
          // 完成注册
          register_finish() {
            if (app.pwd1 != app.pwd2) {
                app.$message.error("两次密码输入不一致");
            } else {
              axios({
                method: "POST",
                url: base_url + "/user/updPwdBA",
                data: Qs.stringify({
                  iphone: this.iphone,
                  pwd1: this.pwd1,
                  pwd2: this.pwd2
                }),
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                  TOKEN: localStorage.getItem("wACCESS_TOKEN")
                }
              })
                .then(function(res) {
                  console.log(res);
                  if (res.data.code == 1) {
                    app.second_steap = false;
                    app.third_step = true;
                    app.active = 3;
                    var timer = setInterval(() => {
                    app.second--;
                        if (app.second == 0) {
                            clearInterval(timer);
                            window.location.href='login.html'
                        }
                    }, 1000);
                  } else {
                    app.$message({
                      message: res.data.msg,
                      type: "warning"
                    });
                  }
                })
                .catch(function(error) {
                  console.log(error);
                });
            }
          }
        }
      });
    </script>
  </body>
</html>
